﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Categoria.ascx.cs" Inherits="TestNutricionalWeb.Templates.Categoria" %>
<script type="text/javascript">
    MostrarTexto('Ayuda: <span class=footerBlack> Para ver equivalencias de porciones, acercar el cursor a cada porci&oacute;n</span>', true);
    $("#divProgress").css('margin-right', '64px');

    $("span.claseToolTip").mouseover(function (e) {
        //Grab the title attribute's value and assign it to a variable
        var tip = $(this).attr('title');

        //Remove the title attribute's to avoid the native tooltip from the browser
        $(this).attr('title', '');

        //Append the tooltip template and its value
        $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');

        //Set the X and Y axis of the tooltip
        $('#tooltip').css('top', e.pageY - 124);
        $('#tooltip').css('left', e.pageX - 150);

        //Show the tooltip with faceIn effect
        $('#tooltip').fadeIn('500');
        $('#tooltip').fadeTo('10', 0.8);
    }).mousemove(function (e) {
        //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
        $('#tooltip').css('top', e.pageY - 124);
        $('#tooltip').css('left', e.pageX - 150);

    }).mouseout(function () {
        //Put back the title attribute's value
        $(this).attr('title', $('.tipBody').html());

        //Remove the appended tooltip template
        $(this).children('div#tooltip').remove();
    });

    $(function () {
        $('select#ddlCuantas').selectmenu({ style: 'dropdown', width: 40 });
    });
</script>
<form name="frmCategoria" runat="server">
<div>
    <table style="width: 100%;">
        <tr>
            <td class="titulo"><asp:Label runat="server" ID="lblTitulo"></asp:Label><br /><span class="subTitulo">Complete a continuaci&oacute;n sus consumos</span></td>
        </tr>
        <tr><td style="height: 1px; background-color: #000000;"></td></tr>
    </table>
</div>
<div>
    <table style="width: 100%; height: 55px;">
        <tr>
            <td class="item" style="width: 100%; padding-left: 5px; padding-top: 5px;"><asp:Label runat="server" ID="lblAlimento"></asp:Label><br /><span class="subItemSmall"><asp:Label runat="server" ID="lblAlimentoContenido"></asp:Label></span></td>                                
        </tr>
    </table>
</div>
<div>
    <table style="width: 100%; height: 51px;">
        <tr><td class="elementoVerdeHeavy" style="height: 45px; background-color: #B4D337; padding-left: 5px;">Porci&oacute;n: <br /><span class="elementoVerde">Seleccione una opción:</span></td></tr>
    </table>
</div>
<div id="divPorciones">
    <table style="width: 100%; height: 55px;">
        <tr>
            <td class="elementoVerde" style="width: 100%; padding-left: 5px; padding-top: 5px; text-align: center;"><asp:RadioButtonList ID="rdPorciones" runat="server" RepeatDirection="Horizontal" TextAlign="Right" Width="680"></asp:RadioButtonList></td>                                
        </tr>
    </table>
</div>
<div>
    <table style="width: 100%; height: 45px;">
        <tr><td class="elementoVerdeHeavy" style="height: 51px; background-color: #B4D337; padding-left: 5px;">Consumo Semanal: <br /><span class="elementoVerde">(7 d&iacute;as):</span></td></tr>
    </table>
</div>
<div id="divConsumos">
    <table style="width: 100%; height: 161px;">
        <tr style="vertical-align:top;">            
            <td class="elementoVerdeSmall" id="tdBack" runat="server">
                <table style="width:100%;">
                    <tr>
                        <td style="width:10%"></td>
                        <td><asp:RadioButtonList ID="rdConsumos" runat="server" RepeatDirection="Horizontal" TextAlign="Right" Width="650" Height="70" RepeatColumns="3"></asp:RadioButtonList></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align:center;"><asp:Label ID="lblImg" runat="server"></asp:Label></td>
                    </tr>
                </table>                
            </td>
        </tr>
    </table>
</div>
</form>